<template>
  <div class="subPage">
    <scroll-view scroll-y="true" v-if="showArray.length > 0">
      <div :class="{ msgList: true, clearfix: true }">
        <div class="infoAll" v-for="(item, index) in showArray" :key="index">
          <ul>
            <li
              @touchstart="touchStart($event, index)"
              @touchend="touchEnd($event, index)"
              :data-type="item.type"
              @click="recover(index, item)"
            >
              <div class="imgInfo">
                <img v-if="item.info_type == '0'" :src="imgUrl + 'msg1.png'" />
                <img v-if="item.info_type == '4'" :src="imgUrl + 'msg1.png'" />
                <img v-if="item.info_type == '1'" :src="imgUrl + 'msg2.png'" />
                <img v-if="item.info_type == '2'" :src="imgUrl + 'msg3.png'" />
                <img v-if="item.info_type == '3'" :src="imgUrl + 'msg4.png'" />
              </div>
              <div class="centerInfo">
                <div class="name clearfix">
                  <span class="fl" v-if="item.info_type == '0' || item.info_type == '4'"
                    >问诊消息
                    <span
                      v-if="item.if_read == '0' && item.readNum > 0"
                      class="radiusNum"
                      >{{ item.readNum }}</span
                    ></span
                  >
                  <span class="fl" v-if="item.info_type == '1'"
                    >报告消息
                    <span v-if="item.if_read == '0'" class="radius"></span
                  ></span>
                  <span class="fl" v-if="item.info_type == '2'"
                    >公告消息
                    <span v-if="item.if_read == '0'" class="radius"></span
                  ></span>
                  <span class="fl" v-if="item.info_type == '3'"
                    >系统消息
                    <span v-if="item.if_read == '0'" class="radius"></span
                  ></span>
                  <span class="fr time" v-if="item.showTime!=='NaN-N'" >{{ item.showTime }}</span>
                </div>
                <div class="sonName clearfix">
                  <span v-if="item.info_type == '0' || item.info_type == '4'">
                  您好,{{item.dept_name+''+item.doctor_identity_desc+''+item.sonName}}已经回复了您的{{item.category_str}},请点击查看详细内容
                  </span>
                  <span v-else-if="item.info_type == '2'" class="info">{{
                    item.info_title
                  }}</span>
                  <span v-else-if="item.info_type == '3'" class="info">{{
                    item.info_text
                  }}</span>
                </div>
              </div>
              <div class="top" @click.stop="read(item)">
                标为已读
              </div>
              <div class="delect" @click.stop="delect(index, item)">
                删除
              </div>
            </li>
          </ul>
        </div>
      </div>
    </scroll-view>
    <div v-if="showArray.length===0 && !delayShowData" class="msgList">
      <img v-if="imgUrl" :src="imgUrl + 'noMsg.png'" class="noneimg" />
    </div>
    <i-toast id="toast" /> 
  </div>
</template>
<script>
let app = getApp();
let store = app.store;
import api from "@/api/api";
import Bus from "@/utils/bus.js";
import * as types from "@/store/types";
import { $Toast } from '../../../../../static/iview/base'
import { mapState } from "vuex";
import nim from "@/utils/nim";
export default {
  data() {
    return {
      type: "",
      showArray: [],
      page: 1,
      startX: "",
      endX: "",
      oldList: [],
      total: 0,
      imgUrl: "",
      delayShowData: true
    };
  },
  computed: {
    ...mapState(["talkInfo", "regularInfo", "sessionsList"]),
  },
    computed: {
      ...mapState([
       'talkInfo', 'regularInfo', 'sessionsList'
      ])
    },
    onLoad (option) {
      mpvue.setNavigationBarTitle({
        title: '消息列表'
      })
      this.type = option.type
      console.log('this.type',this.type)
      // if(this.type=='0'){
      //   this.queryAptMsg()
      // }else{
      //   this.queryOtherMsg(this.type)
      // }
    },
    mounted() {
      let that = this
      this.imgUrl = api.imgUrl
      this.initBus()
    },
  onShow() {
    this.page = 1;
    this.oldList = [];
    this.showArray = [];
    // this.queryAptMsg()
    if(this.type=='0'){
      this.queryAptMsg()
    }else{
      this.queryOtherMsg(this.type)
    }
    store.dispatch({
      type: "CurrentChatTo_Change",
      payload: "",
    });
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    this.page = 1;
    this.showArray = [];
    if (this.type === "0") {
      this.queryAptMsg();
    } else {
      this.queryOtherMsg(this.type);
    }
  },
  // 下拉刷新
  onReachBottom: function () {
    if (this.type == "0") {
      if (this.total == 0) {
        return;
      }
      let up = Math.ceil(this.total);
      if (this.page === up) {
        return;
      }
      this.page++;
      this.queryAptMsg();
    } else {
      this.queryOtherMsg(this.type);
      wx.stopPullDownRefresh();
    }
  },
  methods: {
    // 初始化im信息事件
    initBus() {
      Bus.$on('addMsg', (res, id) => {
        let keyTwo = Object.keys(res[id])
        let allObj = res[id]
        let lastKey = keyTwo[keyTwo.length - 1]
        let nowMsg = allObj[lastKey] // 发来消息对象
        // 该会话在这里显示的列表
        if (that.oldList.length > 0) {
          if (that.oldList[0].idClient === nowMsg.idClient) {
            console.log(that.oldList[0].idClient, nowMsg.idClient, 't')
            // 相同数据 T出去
            return
          }
        }
        console.log(nowMsg, '11')
        for (let i = 0; i < that.showArray.length; i++) {
          if (that.showArray[i].aptId === JSON.parse(nowMsg.custom).aptId) {
            that.$set(that.showArray[i], 'insert_time', nowMsg.time / 1000)
            that.$set(that.showArray[i], 'if_read', 0)
            that.$set(that.showArray[i], 'readNum', (that.showArray[i].readNum ? that.showArray[i].readNum : 0) +1)
            that.oldList.push(nowMsg)
            that.$set(that.oldList[0], 'idClient', nowMsg.idClient)
            that.showArray.sort((a, b) => {
              return b.insert_time - a.insert_time
            })
            return
          }
        }
        console.log(nowMsg, 'nowMsg')
        if (that.oldList.length > 0) {
          if (that.oldList[0].idClient === nowMsg.idClient) {
            // 相同数据 T出去
            return
          } else {
            that.oldList.push(nowMsg)
            that.$set(that.oldList[0], 'idClient', nowMsg.idClient)
            that.onGoingToChat(nowMsg)
            return
          }
          // 该会话不在这里显示的列表
          // 重新查询在进行中的预约,匹配发送消息的对象,把数据补全,才可以点击去聊天页面
        } else {
          that.oldList.push(nowMsg);
          that.$set(that.oldList[0], "idClient", nowMsg.idClient);
          that.onGoingToChat(nowMsg);
          return;
        }
        return
      })
    },
    // 查询其他消息
    queryOtherMsg() {
      let that = this;
      that.delayShowData = true
      let type = this.type === "0" ? "" : this.type;
      that.$api
        .getInformationList(
          { type: type, page: 1, rows: 100 },
          { showLoading: true }
        )
        .then((res) => {
          that.showArray = [...res.data];
          // that.showArray = [...that.showArray]
          for (let i = 0; i < that.showArray.length; i++) {
            if (
              that.$utils.filterTime(that.showArray[i].insert_time, 2) ==
              that.$utils.filterTime(new Date().getTime() / 1000, 2)
            ) {
              that.showArray[i].showTime = that.$utils
                .filterTime(that.showArray[i].insert_time, 5)
                .substring(6, 11); // 当天的显示时分
            } else {
              that.showArray[i].showTime = that.$utils
                .filterTime(that.showArray[i].insert_time, 5)
                .substring(0, 5); // 不是当天的  显示月和日
            }
            that.showArray[i].type = 0;
          }
          wx.stopPullDownRefresh();
          that.delayShowData = false
        });
    },
    // 问诊消息
    queryAptMsg() {
      let that = this;
      that.delayShowData = true // 加载不显示暂无数据
      let arr = [];
      let keyArr = [];
      let obj = {};
      let sessionArr = [...new Set(that.sessionsList)]
      let list = []; // 本次获取的数据
      that.$api
        .ongoingAppointment(
          { page: that.page, rows: 10 },
          { showLoading: true }
        )
        .then((res) => {
          list = res.data;
          that.total = res.total / 10;
          for (let i = 0; i < list.length; i++) {
            if (list[i].chat_type == 1 && list[i].chat_status == '1') { // 新版留言问诊消息
                let obj = {
                  info_type: "4", // 新版留言的问诊消息
                  sonName: list[i].doctor_name,
                  category_str: res.data[i].category_str,
                  doctor_identity_desc: res.data[i].doctor_identity_desc,
                  dept_name: res.data[i].dept_name,
                  chat_id: list[i].chat_id,
                  chat_type:1,
                  readNum: list[i].unread_count?list[i].unread_count:0,
                  insert_time: parseInt(list[i].send_time),
                  if_read: list[i].if_read, // 如果有未读就为0
                  aptId: list[i].apt_id,
                  doctor_netease_id: list[i].doctor_netease_id,
                  type: 0,
                  diagnose_time: list[i].diagnose_time,
                  diagnose_start_time: list[i].diagnose_start_time,
                  category: list[i].category,
                  regular_id: list[i].regular_id,
                  doctor_name: list[i].doctor_name,
                  status: list[i].status,
                  doctorImg: list[i].doctor_image_url,
                  time_type: list[i].time_type,
                  information_id: list[i].information_id
                };
                arr.push(obj);
                continue
            } else {
              for (let j = 0; j < sessionArr.length; j++) {
                if (
                  "p2p-" + list[i].doctor_netease_id ==
                  sessionArr[j].id
                ) {
                  if (
                    list[i].apt_id ==
                    JSON.parse(sessionArr[j].lastMsg.custom).aptId
                  ) {
                    obj = {
                      info_type: "0", // 问诊消息
                      sonName: list[i].doctor_name,
                      category_str: res.data[i].category_str,
                      doctor_identity_desc: res.data[i].doctor_identity_desc,
                      dept_name: res.data[i].dept_name,
                      readNum: sessionArr[j].unread,
                      insert_time: parseInt(sessionArr[j].lastTime / 1000),
                      if_read: sessionArr[j].unread > 0 ? "0" : "1", // 如果有未读就为0
                      aptId: list[i].apt_id,
                      doctor_netease_id: list[i].doctor_netease_id,
                      type: 0,
                      diagnose_time: list[i].diagnose_time,
                      diagnose_start_time: list[i].diagnose_start_time,
                      category: list[i].category,
                      regular_id: list[i].regular_id,
                      doctor_name: list[i].doctor_name,
                      status: list[i].status,
                      doctorImg: list[i].doctor_image_url,
                      time_type: list[i].time_type,
                    };
                  } else {
                    obj = {
                      info_type: "0", // 问诊消息
                      sonName: list[i].doctor_name,
                      category_str: res.data[i].category_str,
                      doctor_identity_desc: res.data[i].doctor_identity_desc,
                      dept_name: res.data[i].dept_name,
                      insert_time: parseInt(list[i].apt_time),
                      if_read: "1", // 已读
                      aptId: list[i].apt_id,
                      doctor_netease_id: list[i].doctor_netease_id,
                      id: list[i].doctor_netease_id,
                      type: 0,
                      diagnose_time: list[i].diagnose_time,
                      diagnose_start_time: list[i].diagnose_start_time,
                      category: list[i].category,
                      regular_id: list[i].regular_id,
                      doctor_name: list[i].doctor_name,
                      status: list[i].status,
                      doctorImg: list[i].doctor_image_url,
                      time_type: list[i].time_type
                    };
                  }
                  arr.push(obj);
                }
              }
            }
            
          }
          wx.stopPullDownRefresh();
          that.showArray = [...that.showArray.concat(arr)];  //去重
          for (let i = 0; i < that.showArray.length; i++) {
            if (
              that.$utils.filterTime(that.showArray[i].insert_time, 2) ==
              that.$utils.filterTime(new Date().getTime() / 1000, 2)
            ) {
              that.showArray[i].showTime = that.$utils
                .filterTime(that.showArray[i].insert_time, 5)
                .substring(6, 11); // 当天的显示时分
            } else {
              that.showArray[i].showTime = that.$utils
                .filterTime(that.showArray[i].insert_time, 5)
                .substring(0, 5); // 不是当天的  显示月和日
            }
            that.showArray[i].type = 0;
          }
          console.log(that.showArray)
          that.showArray.sort((a, b) => {
            return b.insert_time - a.insert_time;
          });
          that.delayShowData = false
        });
    },
    // 医生发来了消息，但是这条问诊消息不在页面显示列表内
    onGoingToChat(nowMsg) {
      return
      let that = this;
      that.$api
        .ongoingAppointment(
          { page: that.page, rows: 10 },
          { showLoading: true }
        )
        .then((res) => {
          let aptId = JSON.parse(nowMsg.custom).aptId;
          for (let i = 0; i < res.data.length; i++) {
            if (aptId === res.data[i].apt_id) {
              let obj = {
                info_type: "0", // 问诊消息
                sonName: res.data[i].doctor_name,
                category_str: res.data[i].category_str,
                doctor_identity_desc: res.data[i].doctor_identity_desc,
                dept_name: res.data[i].dept_name,
                insert_time: nowMsg.time / 1000,
                if_read: "0", // 如果有未读就为0
                aptId: JSON.parse(nowMsg.custom).aptId,
                doctor_netease_id: nowMsg.sessionId.split("-")[1],
                type: 0,
                readNum: 1,
                diagnose_time: res.data[i].diagnose_time,
                diagnose_start_time: res.data[i].diagnose_start_time,
                category: res.data[i].category,
                regular_id: res.data[i].regular_id,
                doctor_name: res.data[i].doctor_name,
                status: res.data[i].status,
                doctorImg: res.data[i].doctor_image_url,
              };
              if (
                that.$utils.filterTime(obj.insert_time, 2) ==
                that.$utils.filterTime(new Date().getTime() / 1000, 2)
              ) {
                obj.showTime = that.$utils
                  .filterTime(obj.insert_time, 5)
                  .substring(6, 11); // 当天的显示时分
              } else {
                obj.showTime = that.$utils
                  .filterTime(obj.insert_time, 5)
                  .substring(0, 5); // 不是当天的  显示月和日
              }
              that.showArray.unshift(obj);
              that.showArray = [...that.showArray]
              that.showArray.sort((a, b) => {
                return b.insert_time - a.insert_time;
              });
              return;
            }
          }
        });
    },
    // 标记为已读
    read(item) {
      let that = this;
      // 一般消息要调接口,阅读
      if (item.if_read == "1") {
        return;
      }
      if (item.info_type != "0") {
        let param = { information_id: item.information_id }
        if (item.info_type=="4") {
          param = { apt_id: item.aptId }
        }
        that.$api
          .isReading(
            param,
            { showLoading: true }
          )
          .then((res) => {
            item.if_read = "1";
            item.type = 0;
          });
      } else {
        // 问诊消息
        item.if_read = "1";
        item.type = 0;
        item.readNum = 0;
        that.readImInfo(item.doctor_netease_id)
        nim.resetSessionUnread("p2p-" + item.doctor_netease_id); // 会话列表有该id信息才重置
        console.log(this.showArray[i].doctor_netease_id,item.doctor_netease_id)
        nim.resetSessionUnread("p2p-" + item.doctor_netease_id); // 会话列表有该id信息才重置
        console.log(that.sessionsList);
      }
    },
    // 滑动开始
    touchStart(e, index) {
      // 获取移动距离，可以通过打印出e，然后分析e的值得出
      this.startX = e.mp.changedTouches[0].clientX;
      for (let i = 0; i < this.showArray.length; i++) {
        if (i === index) {
        } else {
          this.$set(this.showArray[i], "type", 0);
        }
      }
    },
    // 滑动结束
    touchEnd(e, index) {
      // 获取移动距离
      this.endX = e.mp.changedTouches[0].clientX;
      if (this.startX - this.endX > 10) {
        for (let i = 0; i < this.showArray.length; i++) {
          this.$set(this.showArray[index], "type", 0);
        }
        this.$set(this.showArray[index], "type", 1);
      } else if (this.startX - this.endX < -10) {
        for (let i = 0; i < this.showArray.length; i++) {
          this.$set(this.showArray[i], "type", 0);
        }
      }
    },
    // 标记im消息已读
    readImInfo(id) {
      let that = this
      for (let i = 0; i < that.sessionsList.length; i++) {
          if (that.sessionsList[i].id == "p2p-" + id) {
            that.sessionsList[i].unread = 0
            that.$store.commit(that.$types.SESSIONS_LIST, that.sessionsList);
          }
        }
    },
    // 点击回复原状
    recover(index, item) {
      let that = this;
      that.$set(that.showArray[index], "type", 0);
      if (item.info_type == "0") {
        let obj = {
          apt_diagnose_time: item.diagnose_start_time,
          diagnose_time: item.diagnose_time,
          apt_id: item.aptId,
          category: item.category,
          regular_id: item.regular_id,
          doctor_name: item.doctor_name,
          netease_id: item.doctor_netease_id,
          sessionId: "p2p-" + item.doctor_netease_id,
          status: item.status,
          doctorImg: item.doctorImg,
          time_type: item.time_type
        };
        that.$store.commit(that.$types.TALK_INFO, obj);
        // 音频
        nim.resetSessionUnread("p2p-" + item.doctor_netease_id); // 会话列表有该id信息才重置
        that.readImInfo(item.doctor_netease_id)
        that.$set(that.showArray[index], "if_read", "1");
        that.$set(that.showArray[index], "readNum", 0);
        if (item.category === "4" || item.category === "5") {
          if (item.chat_type=='1') {
            that.$router.push( `/pages/chat/child/leaveMsg/main?hadAudio=true&apt_id=${item.aptId}&category=${item.category}`);
          } else {
            that.$router.push(`/pages/chat/child/graphicChat/main?hadAudio=true`);
          }   
        } else {
          // 图文
          console.log('执行视频')
          if (item.chat_type=='1') {
            that.$router.push(`/pages/chat/child/leaveMsg/main?apt_id=${item.aptId}`);
          } else {
            that.$router.push(`/pages/chat/child/graphicChat/main?canSend=1`);
          }          
        }
      } else {
        if (item.info_type == "4") {
          let obj = {
            apt_diagnose_time: item.diagnose_start_time,
            diagnose_time: item.diagnose_time,
            apt_id: item.aptId,
            category: item.category,
            regular_id: item.regular_id,
            doctor_name: item.doctor_name,
            netease_id: item.doctor_netease_id,
            sessionId: "p2p-" + item.doctor_netease_id,
            status: item.status,
            doctorImg: item.doctorImg,
            time_type: item.time_type
          };
          that.$store.commit(that.$types.TALK_INFO, obj); // 保存talkinfo
          if (item.category === "4" || item.category === "5") {
              if (item.chat_type=='1') {
                that.$router.push( `/pages/chat/child/leaveMsg/main?hadAudio=true&apt_id=${item.aptId}&category=${item.category}`);
              } else {
                that.$router.push(`/pages/chat/child/graphicChat/main?hadAudio=true`);
              }   
            } else {
              // 图文
              if (item.chat_type=='1') {
                that.$router.push(`/pages/chat/child/leaveMsg/main?apt_id=${item.aptId}`);
              } else {
                that.$router.push(`/pages/chat/child/graphicChat/main`);
              }          
            }
          if (item.information_id){
            that.$api.isReading({ information_id: item.information_id },{ showLoading: true }).then(res=>{})
          }
          return
        }
        if (
          item.to_link &&
          (item.to_link.type == "follow_serveys" ||
            item.to_link.type == "return_serveys" ||
            item.to_link.type == "exclusive_survey")
        ) {
          that.$utils.showToast("text", "请前往武大云医APP查看和填写");
          return;
        }
        that.$api
          .isReading(
            { information_id: item.information_id },
            { showLoading: true }
          )
          .then((res) => {
            item.if_read = "1";
            item.type = 0;
            if (item.info_type == "3") {
              if (item.to_link && item.to_link.type == "appointment") {
                let obj = {
                  apt_id: item.to_link.id,
                };
                that.$store.commit(that.$types.TALK_INFO, obj);
                that.$router.push(
                  `/pages/center/child/appointmentDetails/main?aptId=${item.aptId}`
                );
              } else if (item.to_link && item.to_link.type == "follow_serveys_detail") { 
                that.$router.push(
                  `/pages/subPage/register/webView/main?id=${item.to_link.id}`
                );
              } else if (item.to_link && item.to_link.type === 'offlineappointment') {
                this.$router.push("/pages/center/child/appointmentRecord/main?isOffline=true")
              } else {
                that.$router.push(
                  `/pages/center/child/remindDetails/main?id=${item.information_id}`
                );
              }
            } else if (item.info_type == "1") {
              this.$utils.showToast("text", "暂未开通");
            } else if (item.info_type == "2") {
              that.$router.push(
                `/pages/center/child/remindDetails/main?id=${item.information_id}`
              );
            }
          });
      }
    },
    // 删除
    delect(index, item) {
      let that = this;
      // 一般消息要调接口
      if (item.info_type != "0") {
        let arr = [], newChatList = [], param = {}
        newChatList.push(item.chat_id)
        arr.push(item.information_id);
        if (item.info_type == "4") {
          param = {
            chat_info_id: newChatList
          }
        } else {
          param = {
            info_list: arr
          }
        }
        that.$api
          .deleteInfo(param, { showLoading: true })
          .then((res) => {
            that.showArray.splice(index, 1);
            $Toast({
              content: '删除成功',
              type: 'success'
            })
            this.getUnreadStatistic();
          });
      } else {
        // 问诊消息
        nim.resetSessionUnread("p2p-" + item.doctor_netease_id); // 会话列表有该id信息才重置
        // 删除服务器会话
        nim.deleteSession({
          scene: "p2p",
          to: item.doctor_netease_id,
          done: that.deleteSessionDone,
        });
        $Toast({
          content: '删除成功',
          type: 'success'
        })
        this.getUnreadStatistic();
      }
    },
    deleteSessionDone(error, obj) {
      let that = this;
      if (error) {
        console.log("删除失败");
        nim.reconnection();
      } else {
        // 找出showArray里面所有一样的netease_id的数据集合 一起删掉
        let indexList = [];
        for (let i = 0; i < that.showArray.length; i++) {
          if (obj[0].to == that.showArray[i].doctor_netease_id) {
            indexList.push(that.showArray[i].aptId);
          }
        }
        for (let i = 0; i < indexList.length; i++) {
          for (let j = 0; j < that.showArray.length; j++) {
            if (indexList[i] == that.showArray[j].aptId) {
              that.showArray.splice(j, 1);
            }
          }
        }
        // 清除sessionList 里面对应id的数据
        for (let i = 0; i < that.sessionsList.length; i++) {
          console.log(that.sessionsList[i]);
          if (that.sessionsList[i].id == "p2p-" + obj[0].to) {
            that.sessionsList.splice(i, 1);
            that.$store.commit(that.$types.SESSIONS_LIST, that.sessionsList);
            return;
          }
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.subPage {
  display: flex;
  flex-direction: column;
}
.msgList {
  flex: 1;
  overflow-y: auto !important;
  position: relative;
  .noneimg {
    width: 550rpx;
    height: 360rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -275rpx;
    margin-top: -180rpx;
  }
  .hadMsg {
    text-align: center;
    margin: 27rpx 0 0 0;
    span {
      display: inline-block;
      padding: 5rpx 16rpx;
      background: #f3f3f3;
      border-radius: 25px;
      color: #4b7aea;
      font-size: 28rpx;
    }
  }
}
.infoAll {
  width: 100%;
  overflow: hidden;
  ul {
    width: 100%;
    /* // overflow-x: scroll; */
    li {
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      width: 1150rpx;
      height: 200rpx;
      border-bottom: 1rpx solid #e9e9e9;
      display: flex;
      align-items: center;
      .imgInfo {
        width: 118rpx;
        height: 118rpx;
        border-radius: 50%;
        margin-left: 20rpx;
        img {
          width: 118rpx;
          height: 118rpx;
          overflow: hidden;
        }
      }
      .centerInfo {
        width: 55%;
        height: 200rpx;
        margin-left: 18rpx;
        margin-right: 120rpx;
        .name {
          margin-top: 38rpx;
          .radius {
            display: inline-block;
            height: 15rpx !important;
            width: 15rpx !important;
            margin-left: 10rpx;
            border-radius: 100%;
            background: red;
          }
          span {
            color: #7c8489;
            height: 50rpx;
            font-size: 34rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 50rpx;
            display: flex;
            align-items: center;
          }
          .radiusNum {
            display: inline-block !important;
            font-size: 20rpx !important;
            background: red;
            color: #fff;
            line-height: 0;
            height: 30rpx;
            width: 30rpx;
            text-align: center;
            line-height: 30rpx;
            border-radius: 100%;
            margin-left: 10rpx;
          }
          .time {
            height: 44rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 44rpx;
          }
        }
        .sonName {
          span {
            color: #999;
            height: 80rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
          }
          .info {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .top {
        width: 15%;
        height: 200rpx;
        line-height: 200rpx;
        background-color: #c4c7cd;
        color: #fff;
        font-size: 34rpx;
        text-align: center;
      }
      .delect {
        width: 15%;
        height: 200rpx;
        line-height: 200rpx;
        background-color: #ff3b32;
        color: #fff;
        font-size: 34rpx;
        text-align: center;
      }
    }
  }
}
li[data-type="0"] {
  transform: translate3d(0, 0, 0);
}
li[data-type="1"] {
  transform: translate3d(-400rpx, 0, 0);
}
</style>
